﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="wfTravelRouteInfo.aspx.cs" Inherits="msBsc.WebUi.wMall.Public.wfTravelRouteInfo" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>路线</title>
    <link href="/jqPlugin/SelectSimu/css/base.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/sLayout.css" rel="stylesheet" />
    <link href="/themes/wStyle1/css/Public/sTraveInfo.css" rel="stylesheet" />
    <style type="text/css">
        .trvel_list {
            display: table;
            width: 900px;
        }

            .trvel_list li {
                float: left;
                width: 160px;
                margin: 10px 10px;
            }

                .trvel_list li .routeImg {
                    width: 160px;
                    display: block;
                    height: 130px;
                    overflow: hidden;
                }

                    .trvel_list li .routeImg a {
                        display: block;
                        width: 130px;
                        height: 130px;
                        margin: auto;
                    }

                        .trvel_list li .routeImg a img {
                            width: 130px;
                            height: 130px;
                            border-radius: 50%;
                            -moz-border-radius: 50%;
                            -webkit-border-radius: 50%;
                        }

                .trvel_list li .routeName {
                    width: 160px;
                    line-height: 36px;
                    color: #333;
                    text-align: center;
                }

                    .trvel_list li .routeName a {
                        color: #333;
                    }
        .viewPC {
            width:900px !important;
        }
        .travelInfo {
            min-height: 200px;
            width: 900px !important;
            margin: 10px auto !important;
        }
            .travelInfo img {
                max-width:880px !important;
            }
        .nav {
            margin: 30px auto !important;
            width: 900px !important;
        }
    </style>
</head>
<body>
    <%=msBsc.WebUi.Code.QtHtmlGet.GetHeaderLoginInfo() %>
    <div class="viewPC">
        <input type="hidden" id="routeId" />
        <div class="nav">
            <a href="/wp_TravelRoute.htm">旅游路线</a><span>></span><a id="topArea">北京</a><span>></span><a id="secendAreaId">北京</a><span>></span><a id="areaId">东城</a><span>></span><span class="nav_list" id="routeName">景点</span>
        </div>
        <div class="travelInfo" id="contentInfo">
            <%--  <p class="p15" style="text-indent: 24.1pt; text-align: center;">
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;">挂甲峪山庄</span>
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;"></span>
            </p>
            <p class="p15" style="text-indent: 24.1pt; text-align: center;">
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;">
                    <br>
                </span>
            </p>
            <p class="p15" style="text-indent: 24.1pt; text-align: center;">
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;">
                    <img alt="" src="http://www.dijieke.com/UpLoad/attached/image/20150126/20150126155926_2703.jpg">
                    <br>
                </span>
            </p>
            <p class="p15" style="text-indent: 24.1pt; text-align: center;">
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;">
                    <br>
                </span>
            </p>
            <p class="p15" style="text-indent: 24.1pt;">
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;">挂甲峪山庄位于京东挂甲峪上。京东挂甲峪是平谷北部山区，属燕山南麓余脉的一部分，它北、东、南三面环山，中间为一狭小的丘陵盆地，面积约5平方公里。挂甲峪村146户，460口人，历史文化悠久，相传成村于明崇祯年间，因宋代名将杨延昭抗辽凯旋在此挂甲休息，后人便取村名为挂甲峪。</span>
                <span style="color: #333333; font-size: 12pt; font-family: 宋体;"></span>
            </p>--%>
        </div>
        <div>
            <h2 style="text-align: center; font-size: 16px; font-family: 微软雅黑; font-weight: bold; color: #333; margin: 25px 0px;">地接客推荐</h2>
            <ul class="trvel_list" id="travel_list">
                <%--<li>
                    <div class="routeImg">
                        <a href="/mp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}">
                            <img title="{{d.rows[i].SCENIC_NAME}}" src="http://www.dijieke.com/UpLoad/scenic/1422253857_162.jpg?1422253859983 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="">{{d.rows[i].SCENIC_NAME}}</a></div>
                </li>
                <li>
                    <div class="routeImg">
                        <a href="/mp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}">
                            <img title="{{d.rows[i].SCENIC_NAME}}" src="http://www.dijieke.com/UpLoad/scenic/1422253857_162.jpg?1422253859983 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="">{{d.rows[i].SCENIC_NAME}}</a></div>
                </li>
                <li>
                    <div class="routeImg">
                        <a href="/mp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}">
                            <img title="{{d.rows[i].SCENIC_NAME}}" src="http://www.dijieke.com/UpLoad/scenic/1422253857_162.jpg?1422253859983 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="">{{d.rows[i].SCENIC_NAME}}</a></div>
                </li>
                <li>
                    <div class="routeImg">
                        <a href="/mp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}">
                            <img title="{{d.rows[i].SCENIC_NAME}}" src="http://www.dijieke.com/UpLoad/scenic/1422253857_162.jpg?1422253859983 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="">{{d.rows[i].SCENIC_NAME}}</a></div>
                </li>
                <li>
                    <div class="routeImg">
                        <a href="/mp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}">
                            <img title="{{d.rows[i].SCENIC_NAME}}" src="http://www.dijieke.com/UpLoad/scenic/1422253857_162.jpg?1422253859983 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="">{{d.rows[i].SCENIC_NAME}}</a></div>
                </li>
                <li>
                    <div class="routeImg">
                        <a href="/mp_TravelScenicInfo.htm?scenicId={{d.rows[i].SCENIC_ID}}">
                            <img title="{{d.rows[i].SCENIC_NAME}}" src="http://www.dijieke.com/UpLoad/scenic/1422253857_162.jpg?1422253859983 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="">{{d.rows[i].SCENIC_NAME}}</a></div>
                </li>--%>
            </ul>
        </div>
        <xmp id="svc_list_temp" style="display: none;">
            {{#for(var i=0,len=d.rows.length;i < len;i++){ }}
                <li>
                    <div class="routeImg">
                        <a href="/wp_DjackVehicle.htm?djackId={{d.rows[i].CUSTOMER_REGISTER_ID}}">
                            <img title="{{d.rows[i].CUSTOMER_NICK}}" src="{{d.rows[i].CUSTOMER_DEFAULT_PIC}} 170x170img.jpg" />
                        </a>
                    </div>
                    <div class="routeName"><a href="/wp_DjackVehicle.htm?djackId={{d.rows[i].CUSTOMER_REGISTER_ID}}">{{d.rows[i].CUSTOMER_NICK}}</a></div>
                </li>
            {{#} }}
        </xmp>
    </div>
    <%=msBsc.WebUi.Code.QtHtmlGet.GetFloorHtml() %>
    <!--start JS引用-->
    <script src="/jqPlugin/js/jquery-1.8.3.min.js"></script>
    <script src="/jqPlugin/js/jBase.js"></script>
    <script src="/jqPlugin/js/jBPage.js"></script>
    <script src="/jqPlugin/js/laytpl.js"></script>
    <script src="/jqPlugin/SelectSimu/js/SelectSimu.js"></script>
    <script src="/themes/wStyle1/js/comm/VerifyJs.js"></script>
    <script src="/themes/wStyle1/js/comm/jsLayout.js"></script>
    <!--end JS引用-->
    <script type="text/javascript">
        (function () {
            $("#routeId").val(GetQueryStr("routeId"));
        })()
        function btnDo(sEbtn) {
            GtGrid1Action = sEbtn;
            var opart = GetGtParam();
            //opart = addNoAreStatistics(opart, "资讯景区详情", "w0008");
            ajaxComm(opart);
        };
        //执行AJAX调用时获取参数
        function GetGtParam() {
            var _jsParam = new jsonRow();
            _jsParam.AddCell("routeId", $("#routeId").val());
            _jsParam.AddCell("ACTION", GtGrid1Action);
            return _jsParam;
        };
        btnDo("init");

        function setScenicInfo(data) {
            $("#contentInfo").html("");
            if (IsNull(data)) {
                return;
            }
            document.title += "-" + data.rows[0].ROUTE_TITEL;
            $("#topArea").text(data.rows[0].countyName);
            $("#topArea").attr("data-value", data.rows[0].ROUTE_COUNTRY);
            $("#secendAreaId").text(data.rows[0].provinceName);
            $("#secendAreaId").attr("data-value", data.rows[0].ROUTE_PROVINCE);
            $("#areaId").text(data.rows[0].areaName);
            $("#areaId").attr("data-value", data.rows[0].ROUTE_AREA);
            $("#routeName").text(data.rows[0].ROUTE_TITEL);
            doBoundContent(data.rows[0].ROUTE_INTRODUCTION);
            var _html = $('#svc_list_temp').html();
            //$("#scenicList").html("");
            laytpl(_html).render(data.rows[0], function (render) {
                $("#travel_list").html(render);
            });
            //$("#scenicList").attr("href", "/wp_TravelScenicList.htm?countryId=" + data.rows[0].COUNTRYID + "&cityId=" + data.rows[0].CITYID + "&destionId=" + data.rows[0].DISTIANTIONID + "&pIndex=1");
            $("#areaId").attr("href", "/wp_TravelRoute.htm?countryId=" + data.rows[0].ROUTE_COUNTRY + "&cityId=" + data.rows[0].ROUTE_PROVINCE + "&destionId=" + data.rows[0].ROUTE_AREA + "&pIndex=1");
            $("#secendAreaId").attr("href", "/wp_TravelRoute.htm?countryId=" + data.rows[0].ROUTE_COUNTRY + "&cityId=" + data.rows[0].ROUTE_PROVINCE + "&destionId=&pIndex=1");
            $("#topArea").attr("href", "/wp_TravelRoute.htm?countryId=" + data.rows[0].ROUTE_COUNTRY + "&cityId=&destionId=&pIndex=1");

        }

        function doBoundContent(_shopurl) {
            if (_shopurl != null && _shopurl != undefined && _shopurl != '') {
                jQuery.loadHtml(_shopurl).done(function (_rethtml) {
                    var tpl = HtmlUtil.htmlDecode(_rethtml);
                    $("#contentInfo").html(tpl);
                });
            }
        };
    </script>
</body>
</html>
